<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容列表 - jQuery练习</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table tr th, table tr td {
            border: 1px solid #666666;
            padding: 5px;
        }
    </style>

    <script src="../scripts/jquery.min.js"></script>
</head>
<body>
<p>
    <button id="all">全选</button>
    <button id="reverse">反选</button>
    <button id="cancel">取消</button>

    批量操作：
    <select id="operation-select">
        <option>--请选择操作--</option>
        <option value="1">删除</option>
        <option value="2">审核</option>
        <option value="3">取消审核</option>
    </select>
    <button id="operation-btn">提交</button>
</p>

<table>
    <thead>
    <tr>
        <th>#</th>
        <th>id</th>
        <th>标题</th>
        <th>审核</th>
        <th>时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1001</td>
        <td>为什么二孩政策放开，生育率反而连年走低？</td>
        <td class="audit-str">未审核</td>
        <td>2020-11-21</td>
        <td>
            <button class="delete">删除</button>
            <button class="audit-btn" datatype="1">审核</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>10005</td>
        <td>上海浦东医院4015人被隔离，全部核酸检测</td>
        <td class="audit-str">已审核</td>
        <td>2020-11-21</td>
        <td>
            <button class="delete">删除</button>
            <button class="audit-btn" datatype="2">取消审核</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>10006</td>
        <td>中国主权债券历史性一幕！</td>
        <td class="audit-str">未审核</td>
        <td>2020-11-22</td>
        <td>
            <button class="delete">删除</button>
            <button class="audit-btn" datatype="1">审核</button>
        </td>
    </tr>
    </tbody>
</table>
<script>

    // -----------------------------
    // 1. 表格显示操作
    // -----------------------------
    // 1. 鼠标移动到表格上每一行的时候，背景变更为灰色。

    $(document).ready(function () {
        $("tr").hover(
            function () {
                $(this).css("background-color", "gray");
            },
            function () {
                $(this).css("background-color", "white");
            });

        // -----------------------------
        // 2. 全选、反选、取消按钮操作
        // -----------------------------
        // 2.1 点击全选按钮，则新闻列表表格首列的复选框会被全部选中

        $("#all").click(function () {
            $("input[type='checkbox']").prop("checked", true);
        });

        // 2.2 点击反选按钮，则新闻列表表格首列的复选框选中的取消，没有选中的则选中

        $("#reverse").click(function () {
            $("input[type='checkbox']").each(function () {
                $(this).prop("checked", !$(this).prop("checked"));
            })
        });

        // 2.3 点击取消按钮，则新闻列表表格首列的复选框会被全部取消选中

        $("#cancel").click(function () {
            $("input[type='checkbox']").prop("checked", false);
        });

        // -----------------------------
        // 3. 删除、审核按钮操作
        // -----------------------------
        // 3.1 点击删除按钮，则提示：是否确认删除？如果确认删除，则移除本行。

        $(".delete").click(function () {
            let b = confirm("是否确认删除?");
            if (b) {
                $(this).parents("tr").remove();
            }
        });

        // 3.2 点击审核按钮，则提示：是否确认审核？如果确认审核，则审核列字眼变成：已审核。相关按钮变成：取消审核
        // 3.3 点击取消审核按钮，操作如上，只是功能相反。

        $(".audit-btn").click(function () {
            if ($(this).attr("datatype") === "1") { //点击了审核按钮
                if (window.confirm("是否确认审核")) {
                    $(this).text("取消审核");
                    $(this).parent().parent().children(".audit-str").text("已审核");
                    $(this).attr("datatype", 2);
                }
            } else if ($(this).attr("datatype") === "2") { //点击了取消审核按钮
                if (window.confirm("是否取消审核")) {
                    $(this).text("审核");
                    $(this).parent().parent().children(".audit-str").text("未审核");
                    $(this).attr("datatype", 1);
                }
            }
        });

        // -----------------------------
        // 4. 批量删除、审核、取消审核操作
        // -----------------------------
        // 4.1 功能如上面，只是可以根据选中的文章进行批量操作。

        $("#operation-btn").click(function () {
            if ($("#operation-select").val() === "1") { // 删除操作
                if (window.confirm("是否确认删除")) {
                    $("input[type='checkbox']").each(function () {
                        if ($(this).prop("checked")) { // 被选中
                            $(this).parent().parent().remove();
                        }
                    });
                }
            } else if ($("#operation-select").val() === "2") { // 审核操作
                if (window.confirm("是否确认审核")) {
                    $("input[type='checkbox']").each(function () {
                        if ($(this).prop("checked")) { // 被选中
                            if ($(this).parent().parent().find(".audit-btn").attr("datatype") === "1") { // 确保全选不出问题
                                $(this).parent().parent().find(".audit-btn").click();
                                // $(this).parent().children(".audit-btn").text("取消审核");
                                // $(this).parent().parent().children(".audit-str").text("已审核");
                                // $(this).attr("datatype", 2);
                            }
                        }
                    });
                }
            } else if ($("#operation-select").val() === "3") { // 取消审核操作
                if (window.confirm("是否取消审核")) {
                    $("input[type='checkbox']").each(function () {
                        if ($(this).prop("checked")) { // 被选中
                            if ($(this).parent().parent().find(".audit-btn").attr("datatype") === "2") { // 确保全选不出问题
                                $(this).parent().parent().find(".audit-btn").click();
                            }
                        }
                    });
                }
            }
        })
    })
</script>
</body>
</html>